function JSBDS() {
	const show = true
	const name = 'John'
	const add = (a, b) => {
		return a + b
	}

	const articleType = 2 // 0代表普通文章，1代表置顶文章,2代表热门文章
	const getArticleType = () => {
		switch (articleType) {
			case 0:
				return <p>普通文章</p>
			case 1:
				return <p>置顶文章</p>
			case 2:
				return <p>热门文章</p>
			default:
				return <p>未知类型</p>
		}
	}

	const handleClick1 = (e) => {
		console.log(e)
	}

	const handleClick2 = (e, name) => {
		console.log(e, name)
	}

	return (
		<>
			{/* 使用引号包裹字符串 */}
			<p>{`Hello, world!`}</p>

			{/* 使用JS表达式 */}
			<p>{`Hello, ${name}!`}</p>

			{/* 函数调用 */}
			<p>{`The result is: ${add(2, 3)}`}</p>

			{/* 函数表达式 */}
			<p>{`The result is: ${name.toUpperCase()} ${Date.now()}`}</p>

			{/* JS对象 */}
			<p style={{ color: 'blue' }}>{`The object is: ${{ name: 'John', age: 30 }}`}</p>

			{/* 列表渲染 */}
			<ul>
				{[1, 2, 3, 4, 5].map((item) => (
					<li key={item}>{item}</li>
				))}
			</ul>

			{/* 条件渲染：&&、三元表达式 */}
			{show && <p>Hello, John!</p>}
			{show ? <p>Hello, John!</p> : <p>Bye, John! </p>}

			{/* 复杂情况条件渲染 */}
			{getArticleType()}

			{/* 事件处理 */}
			<button onClick={handleClick1}>Click me 1</button>
			<br />
			<br />
			{/* 事件不能加括号直接传递参数，因为渲染模版时，会被当作函数自动调用，需要用箭头函数包裹 */}
			<button onClick={(e) => handleClick2(e, 'John')}>Click me 2</button>
		</>
	)
}

export default JSBDS
